<!--
 * @userName: 湫之恋
 * @Author: Seven
 * @Date: 2020-07-01 15:38:52
 * @LastEditors: Seven
 * @LastEditTime: 2020-07-02 17:58:43
 -->
<template  >
  <div>
    <searchCarch></searchCarch>
    <el-table :data="carlist" border style="width: 100%">
      <el-table-column fixed prop="carname" align="center" label="品牌" width="150">
        <!-- <template slot-scope="scope">
          <div v-if="scope.row.carBool==='待出租'">{{scope.row.carBool}}</div>
        </template> -->
      </el-table-column>
      <el-table-column prop="carImage" label="图片" align="center" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.carImage" style="width: 120px;height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" align="center" width="150"></el-table-column>
      <el-table-column prop="userId.name" label="车主" align="center" width="150"></el-table-column>
      <el-table-column prop="modelNumber" label="型号" align="center" width="120"></el-table-column>
      <el-table-column prop="licencePlate" label="车牌" align="center" width="120"></el-table-column>
      <el-table-column prop="displacement" label="排量" align="center" width="140"></el-table-column>
      <el-table-column prop="description" label="车辆描述" align="center" width="180"></el-table-column>
      <el-table-column prop="carBool" label="状态" align="center" width="120"></el-table-column>
    </el-table>
    <div class="pagination" >
      <div class="paginationMain">
        <span @click="firstPage">首页</span>
        <span @click="previous">上一页</span>
        
        <span @click="mynextPage">下一页</span>
        <span @click="maxPage">尾页</span>
      </div>
      <span>{{yeshu}}/{{pages}}</span>
    </div>
  </div>
</template>

<script>
import searchCarch from "./searchCarch/searchCarch";
import { createNamespacedHelpers } from "vuex";
var { mapActions, mapState,mapGetters } = createNamespacedHelpers("car");
export default {
  components: {
    searchCarch
  },
  data() {
    return {
      list: [{ name: "lsy", password: "123" }]
    };
  },
  created() {
    this.getcaractions();
  },
  methods: {
    ...mapActions(["getcaractions",'overleaf','pageup','trailer','homepage']),
    handleClick(res) {
      console.log(res);
    },
    removeClick(res) {
      console.log(res);
    },
    firstPage() {//首页
      this.homepage()
    },
    previous() {//上页
      this.pageup()
    },
    mynextPage() {//点击下一页
      this.overleaf()
    },
    maxPage() {//尾页
      this.trailer()
    }
  },
  computed: {
    ...mapState(["carlist",'pages','yeshu']),
  }
};
</script>

<style>
.el-main[data-v-452a4712] {
  text-align: center !important;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
.pagination{
  display:flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
}
.pagination .paginationMain {
  display: flex;
  justify-content: center;
  /* margin-top: 20px; */
}
.pagination .paginationMain span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.pagination .paginationMain span:hover {
  border: 1px solid #f3a83f;
  color: #f3a83f;
}
</style>